<template>
	<view class="content">
		<lxc_nav :text='title' :bacicon="'#fff'" :background='bac' right='icon'>
			<view class="" slot='icon'>
				<image @click="shezhi" class="ri_image" src="../../static/my/shezhi.png" mode=""></image>
			</view>
		</lxc_nav>
		<view id="box">
			<view class="ba_top">
				<image src="../../static/my/bjt.png" mode=""></image>
			</view>
			<view class="mybox">
				<view class="mybox_left">
					<image src="../../static/my/tx.png" mode=""></image>
				</view>
				<view class="mybox_right">
					<view class="mybox_right_text">
						<text>钢铁瞎</text>
					</view>
					<view class="viptime">
						<image src="../../static/my/vip.png" mode=""></image>
						<text>VIP时间</text>
						<text>2024-03-23</text>
					</view>
				</view>
			</view>
			<view class="mylist">
				<view class="mylist_zichan">
					<view class="mylist_left" @click="usdt">
						<image src="../../static/my/zic.png" mode=""></image>
						<text>USDT资产</text>
						<image src="../../static/my/jiantou.png" mode=""></image>
					</view>
					<view class="mylist_right" @click="gub">
						<image src="../../static/my/zcre.png" mode=""></image>
						<text>GUB资产</text>
						<image src="../../static/my/jiantou.png" mode=""></image>
					</view>
				</view>
				<view class="mylist_zichan">
					<view class="mylist_left" @click="j_y_jilu">
						<image src="../../static/my/jyjl.png" mode=""></image>
						<text>交易记录</text>
						<image src="../../static/my/jiantou.png" mode=""></image>
					</view>
					<view class="mylist_right" @click="goumai">
						<image src="../../static/my/gmtc.png" mode=""></image>
						<text>购买套餐</text>
						<image src="../../static/my/jiantou.png" mode=""></image>
					</view>
				</view>
				<view class="mylist_zichan" @click="fenxiang">
					<view class="main_list">
						<image src="../../static/my/xz.png" mode=""></image>
						<text>分享</text>
						<image src="../../static/my/fenx.png" mode=""></image>
					</view>
				</view>
				<view class="mylist_zichan">
					<view class="mylist_left" @click="shequ">
						<image src="../../static/my/shequ.png" mode=""></image>
						<text>社区</text>
						<image src="../../static/my/jiantou.png" mode=""></image>
					</view>
					<view class="mylist_right" @click="yuyan">
						<image src="../../static/my/zyw.png" mode=""></image>
						<text>选择语言</text>
						<image src="../../static/my/jiantou.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import lxc_nav from '../../components/nav.vue'
	export default {
		components: {
			lxc_nav
		},

		onShow() { //语言切换
		
			this.$i18n.locale = uni.getStorageSync('lang') ? 'en' : 'cn';
			// 注意：【支付宝小程序开发工具】需要1.13版本才支持此接口的模拟，真机预览不受限制
			uni.setTabBarItem({
				index: 0,
				text: this.$t('tabbar.a'),
				iconPath: "/static/tabbar/shouyh.png",
				selectedIconPath: "/static/tabbar/shouyl.png",
			})

			uni.setTabBarItem({
				index: 1,
				text: this.$t('tabbar.b'),
				iconPath: "/static/tabbar/clvhs.png",
				selectedIconPath: "/static/tabbar/clls.png",
			})

			uni.setTabBarItem({
				index: 2,
				text: this.$t('tabbar.c'),
				iconPath: "/static/tabbar/hangqhse.png",
				selectedIconPath: "/static/tabbar/hangqls.png",
			})
			uni.setTabBarItem({
				index: 3,
				text: this.$t('tabbar.d'),
				iconPath: "/static/tabbar/sy_wddb.png",
				selectedIconPath: "/static/tabbar/sy_wddblan.png",
			})

		},
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			// this.scrollTop = e.scrollTop;
			console.log(e.scrollTop);
			if (e.scrollTop > 22) {
				this.bac = {
					backgroundImage: 'linear-gradient(150deg,rgba(25, 137, 250, 1), rgba(18, 174, 255, 1))'
				}
			} else {
				this.bac = {
					backgroundImage: 'linear-gradient(150deg,rgba(25, 137, 250, 0), rgba(18, 174, 255, 0))'
				}
			}
		},
		data() {
			return {
				bac: {
					backgroundImage: 'linear-gradient(150deg,rgba(25, 137, 250, 0), rgba(18, 174, 255, 0))'
				},
				title:''
			}
		},
		onLoad() {
			
		},
		methods: {
			// usdt资产
			usdt() {
				uni.navigateTo({
					url: '/pages/my/my_assets'
				});
			},
			// gub资产
			gub() {
				uni.navigateTo({
					url: '/pages/setup/gubassets'
				});
			},
			// 分享
			fenxiang() {
				uni.navigateTo({
					url: '/pages/my/share'
				});
			},
			// 交易记录
			j_y_jilu() {
				uni.navigateTo({
					url: '/pages/transaction/record'
				});
			},
			// 购买套餐
			goumai() {
				uni.navigateTo({
					url: '/pages/transaction/Purchase_package'
				});
			},
			// 社区
			shequ() {
				uni.navigateTo({
					url: '/pages/home_page/Invitation_reward'
				});
			},
			// 语言
			yuyan() {
				uni.navigateTo({
					url: '/pages/my/Language'
				});
			},
			// 设置
			shezhi() {
				uni.navigateTo({
					url: '/pages/setup/setting'
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f6f8;
	}

	.ri_image {
		width: 34rpx;
		height: 39rpx;
		position: relative;
		right: 20rpx;
		top: 10rpx;
	}

	.main_list {
		position: relative;
	}

	.main_list image:nth-child(1) {
		position: absolute;
		width: 106rpx;
		height: 109rpx;
		top: 10rpx;
		left: 61rpx;
	}

	.main_list image:nth-child(3) {
		position: absolute;
		width: 38rpx;
		height: 40rpx;
		top: 41rpx;
		right: 81rpx;
	}

	.main_list text {
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 40rpx;
		position: absolute;
		top: 40rpx;
		right: 165rpx;
	}

	#box {
		position: absolute;
		margin-top: 88rpx;
	}

	.ba_top {
		position: absolute;
		width: 100vw;
		margin-top: -22vw;
	}

	.ba_top image {
		width: 100vw;
		height: 410rpx;
	}

	.mybox {
		display: flex;
	}

	.mybox_left {
		position: relative;
		height: 124rpx;
		width: 124rpx;
		top: 58rpx;
		left: 101rpx;
		border-radius: 50%;
		// border: 2px solid #FFFFFF;
	}

	.mybox_left image {
		width: 100%;
		height: 100%;
	}

	.mybox_right {
		position: relative;
		height: 124rpx;
		top: 58rpx;
		left: 123rpx;
	}

	.mybox_right_text text {
		height: 31rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 40rpx;
		position: relative;
		top: 25rpx;
	}

	.viptime image {
		width: 110rpx;
		height: 36rpx;
		position: absolute;
		top: 76rpx;
	}

	.viptime text:nth-child(2) {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 40rpx;
		position: relative;
		top: 30rpx;
		left: 15rpx;
	}

	.viptime text:nth-child(3) {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 40rpx;
		position: relative;
		left: 40rpx;
		top: 30rpx;
	}

	.mylist {
		position: relative;
		width: 92vw;
		margin-left: 4vw;
		margin-top: 139rpx;
	}

	.mylist_zichan {
		display: flex;
	}

	.mylist_left {
		width: 50%;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 1rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		display: flex;
		position: relative;
		margin-bottom: 20rpx;
	}

	.main_list {
		display: flex;
		width: 100%;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 1rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.mylist_right {
		width: 50%;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 1rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		margin-left: 10rpx;
		display: flex;
	}

	.mylist_left image:nth-child(1) {
		width: 40rpx;
		height: 40rpx;
		margin-top: 40rpx;
		margin-left: 45rpx;
	}

	.mylist_left text:nth-child(2) {
		display: inline-block;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 40rpx;
		margin-top: 40rpx;
		height: 40rpx;
		margin-left: 45rpx;
	}

	.mylist_left image:nth-child(3) {
		width: 15rpx;
		height: 26rpx;
		margin-top: 47rpx;
		position: absolute;
		right: 19rpx;
	}

	.mylist_right image:nth-child(1) {
		width: 40rpx;
		height: 40rpx;
		margin-top: 40rpx;
		margin-left: 45rpx;
	}

	.mylist_right text:nth-child(2) {
		display: inline-block;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 40rpx;
		margin-top: 40rpx;
		height: 40rpx;
		margin-left: 45rpx;
	}

	.mylist_right image:nth-child(3) {
		width: 15rpx;
		height: 26rpx;
		margin-top: 47rpx;
		position: absolute;
		right: 19rpx;
	}
</style>
